<template>
  <div class="singer-wrapper" ref="singer">
    <ListView
      :data="singerList"
      @route="handleRoute"
      ref="listview"
      ></ListView>
    <slide>
      <router-view></router-view>
    </slide>
  </div>
</template>

<script>
import { getSingerList } from 'api'
import ListView from 'base/listview/listview'
import Slide from 'base/slide/slide'
import { mapMutations } from 'vuex'
import { playlistMixin } from 'common/js/mixin'

export default {
  name: 'singer',
  mixins: [ playlistMixin ],
  components: {
    ListView,
    Slide
  },
  data () {
    return {
      singerList: []
    }
  },
  created () {
    this._getSingerList()
  },
  methods: {
    _getSingerList () {
      getSingerList().then((singerList) => {
        // console.log(singerList)
        this.singerList = singerList
      })
    },
    handleRoute (singer) {
      // console.log(singer)
      this.$router.push({
        path: `/singer/${singer.singer_id}`
      })
      this.setSinger(singer)
    },
    handlePlaylist (playlist) {
      const bottom = playlist.length > 0 ? '60px' : ''
      this.$refs.singer.style.bottom = bottom
      this.$refs.listview.refresh()
    },
    ...mapMutations({
      setSinger: 'SET_SINGER'
    })
  }
}
</script>

<style lang="stylus" scoped>
  .singer-wrapper {
    position: absolute
    top: 76px
    right: 0
    bottom: 0
    left: 0
  }
</style>
